<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>欢迎使用CRM管理系统</title>
    <link rel="stylesheet" href="${basePath }/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" />
    <script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a href="${basePath }/message" class="brand">凯盛CRM管理系统</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="${basePath }/message">最新动态</a></li>
                        <li  class="active"><a href="${basePath }/contacts/list">联系人</a></li>
                        <li><a href="${basePath }/task/list">日程安排</a></li>
                        <li><a href="${basePath }/deal/list">业务机会</a></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li><a href="#">${user.username }</a></li>
                        <li class="divider-vertical"></li>
                        <li><a href="${basePath }/user/info">账号设置</a></li>
                        <li><a href="${basePath }/user/loginout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="content" class="container">
        <div class="span9">
            <ul class="breadcrumb" style="vertical-align:top">
                <li class="active">联系人和公司</li>
                <div class="pull-right">
					<li class="link-black"><a href="#" id="father2" hidden="true" >取消全选</a></li>
					<li class="link-black"><a href="#" id="father1">选择全部</a></li>
				</div>
            </ul>
            <div class="well">
                <div style="display:none"></div>
                <table id="table">
                    <c:forEach items="${contactsList }" var="contacts">
                        <c:choose>
                        	<c:when test="${contacts.name == null }">
	                        	<tr>
			                        <td>
			                            <input type="checkbox" name="son" class="son" value="${contacts.id }"/>
			                        </td>
	                        		<td style="width:80px">
			                            <a href="${basePath }/contacts/detail?id=${contacts.id }">
			                                <img src="${basePath }/img/company.png" alt="ss" />
			                            </a>
			                        </td>
			                        <td style="width:784px">
			                            <h3><a href="${basePath }/contacts/detail?id=${contacts.id }">${contacts.companyName }</a></h3>
			                            <h6>${contacts.address }</h6>
			                        </td>
			                    </tr>
                        	</c:when>
                        	<c:otherwise>
	                        	<tr>
			                        <td>
			                            <input type="checkbox" name="son" class="son" value="${contacts.id }"/>
			                        </td>
	                        		<td style="width:80px">
			                            <a href="${basePath }/contacts/detail?id=${contacts.id }">
			                                <img src="${basePath }/img/contacts.png" alt="${contacts.name }" />
			                            </a>
			                        </td>
			                        <td style="width:784px">
			                            <h3><a href="${basePath }/contacts/detail?id=${contacts.id }">${contacts.name }</a></h3>
			                            <h6>${contacts.title } <a href="${basePath }/contacts/detail?id=${contacts.contacts.id }">${contacts.companyName }</a></h6>
			                        </td>
			                    </tr>
                        	</c:otherwise>
                        </c:choose>
                    </c:forEach>
                </table>
            </div>
        </div>
        <div class="span3">
        	<a href="${basePath }/contacts/add" class="btn btn-info">新增联系人</a><br/><br/>
			<div class="box well" id="action_box" hidden="true">
				<div class="head">操作</div>
				<ul style="list-style-type:none" >
					<li>
						<div class="controls">
							<label class="radio">
								<input type="radio" name="view" value="all" />所有人<br/>
							</label>
							<label class="radio">
								<input type="radio" name="view" value="me" />只有我<br/>
							</label>
							<label class="radio">
								<input type="radio" name="view" value="group" data-toggle="collapse" data-target="#group" data-parent="#detail" />选择一个组<br/>
							</label>
							<div id="group" class="collapse">
                                <select name="group" style="width:150px" id="groupDiv">
                                    <option value="">--请选择一个分组--</option>
                                    <c:forEach items="${userGroupList }" var="group">
                                    	<option value="${group.id }">${group.groupName }</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <label class="radio">
                            	<input type="radio" name="view" value="people" data-toggle="collapse" data-target="#people" data-parent="#detail" />选择一些人<br/>
                            </label>
                            <div id="people" class="collapse">
                            	<c:forEach items="${userList }" var="user">
                            		<input type="checkbox" name="people" value="${user.id }" />${user.username }
                                </c:forEach>
                            </div>
						</div>
						<button type="button" class="btn" id="changeView">改变</button>
					</li>
				</ul>
			</div>
			<div class="box well" id="delDiv" hidden="true">
                <div class="head">删除</div>
                <ul style="list-style-type:none" id="searchBy">
					<li>
						<a href="javascript:;" id="delete_contects" >删除这些联系人</a>
					</li>
				</ul>
			</div>
			<br/>
            <div class="box well">
                <div class="head">搜索</div>
                <ul style="list-style-type:none" id="searchBy">
                    <form action="${basePath }/contacts" method="post">
	                    <li>
	                        <a href="#" data-toggle="collapse" data-target="#name" data-parent="#searchBy" class="link-black">姓名</a>
	                        <div id="name" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="姓名" name="q_like_name" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
	                    <li>
	                        <a href="#" data-toggle="collapse" data-target="#companyname" data-parent="#searchBy" class="link-black">公司</a>
	                        <div id="companyname" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="公司" name="q_like_companyName" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
	                    <li>
	                        <a href="#title" data-toggle="collapse" data-target="#title"  data-parent="#searchBy" class="link-black">职位</a>
	                        <div id="title" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="职位" name="q_like_title" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
	                    <!-- <li>
	                        <a href="#email" data-toggle="collapse" data-target="#email"  data-parent="#searchBy" class="link-black">邮箱</a>
	                        <div id="email" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="邮箱" name="q_like_mailSet" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
	                    <li>
	                        <a href="#phone" data-toggle="collapse" data-target="#phone"  data-parent="#searchBy" class="link-black">电话</a>
	                        <div id="phone" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="电话" name="q_like_telSet" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li> -->
	                    <li>
	                        <a href="#website" data-toggle="collapse" data-target="#website"  data-parent="#searchBy" class="link-black">网址</a>
	                        <div id="website" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="网址" name="q_like_website" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
	                    <li>
	                        <a href="#address" data-toggle="collapse" data-target="#address"  data-parent="#searchBy" class="link-black">地址</a>
	                        <div id="address" class="collapse input-append">
	                            <input type="text" class="input-small" placeholder="地址" name="q_like_address" /><button class="btn" type="submit">查找</button>
	                        </div>
	                    </li>
                    </form>
                </ul>   
            </div>
            <div class="span3 well" style="padding-top:0px">
	            <div class="box">
	                <div class="head">上传或下载</div>
	                <ul style="list-style-type:none">
	                    <li>
	                    	从Excel文件<a href="#myModal" data-toggle="modal">导入</a>
	                    </li>
	                    <li>
	                    	<a href="${basePath }/file/exportExcel">导出</a>到本地Excel
	                    </li>
	                    <li>
	                    	<a href="${basePath }/file/downmodal">下载</a>联系人模板
	                    </li>
	                </ul>
	            </div>
	        </div>
	        <form class="form-horizontal" action="${basePath }/file/upload" method="post" enctype="multipart/form-data">
			    <div class="modal hide fade" id="myModal">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">×</button>
						<h3>上传Excel文件</h3>
					</div>
					<div class="modal-body">
						<fieldset>
							<div class="control-group">
								<label class="control-label">选择文件</label>
								<div class="controls">
									<input name="file" type="file"/>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" type="submit">保存</button>
						<a href="#" class="btn" data-dismiss="modal">关闭</a> 
					</div>
				</div>
			</form>
        </div>
    </div>
	<script type="text/javascript">
		$("#father1").click(function() {
			var sons = $(".son");
			for(var i=0; i<sons.length; i++){				
				sons[i].checked = true;
			}
			$("#father1").hide();
			$("#father2").show();
			$("#action_box").show(200);
			$("#delDiv").show(200);
		});
		$("#father2").click(function() {
			var sons = $(".son");
			for(var i=0; i<sons.length; i++){				
				sons[i].checked = false;
			}
			$("#father1").show();	
			$("#father2").hide();
			$("#action_box").hide(200);
			$("#delDiv").hide(200);
		});
		$(".son").click(function(){			
			var sons = $(".son");
			var b = sons.length;
			for(var i=0;i<sons.length;i++) {
				if(sons[i].checked == false){
					b=b-1;
				}
			}
			if(b == sons.length) {
				$("#father1").hide();
				$("#father2").show();
				$("#action_box").show(200);	
				$("#delDiv").show(200);
			} else if(b>0&&b<sons.length){
				$("#father1").show();
				$("#father2").show();
				$("#action_box").show(200);
				$("#delDiv").show(200);
			} else {
				$("#father1").show();
				$("#father2").hide();
				$("#action_box").hide(200);
				$("#delDiv").hide(200);
			}
		});
		$("#delete_contects").click(function() {
			var c = confirm("确定要删除这些联系人吗？");
			if(c == true){
				var idList = $("input[name='son']:checked");
				var idArr = "";
				var i = 0;
				$(idList).each(function() {
					idArr += $(this).val();
					i++;
					if (i != idList.length) {
						idArr += ",";
					}
				});
				$.post("${basePath}/contacts/batch-delete",{"idArr":idArr}, function() {
					window.location.href = "${basePath}/contacts";
				});
			}
		});
		$("#changeView").click(function() {
			var view = $("input[name='view']:checked").val();
			var group = $("#groupDiv option:selected").val();
			var people = $("input[name='people']:checked");
			var peopleArr = "";
			var i = 0;
			$(people).each(function() {
				peopleArr += $(this).val();
				i++;
				if (i != people.length) {
					peopleArr += ",";
				}
			});
			var idList = $("input[name='son']:checked");
			var idArr = "";
			var i = 0;
			$(idList).each(function() {
				idArr += $(this).val();
				i++;
				if (i != idList.length) {
					idArr += ",";
				}
			});
			
			$.post("${basePath}/contacts/batch-update",{"view":view, "group":group, "peopleArr":peopleArr, "idArr":idArr}, function() {
				window.location.href = "${basePath}/contacts";
			});
		});
	</script>
</body>
</html>
